<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="#"/>
</head>
<body>
<div id="mydiv">
    <input type="button" value="从服务端获取数据:" v-on:click="loadData()">
    书刊名(模糊查)：<input type="text" v-model="queryWhere.bookName" id="bookName" >  书刊类型:<input type="text" v-model="queryWhere.bookType" id="bookType"> <input type="button" @click="loadBooks()" value="查询">
    <table border="1px" >
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>isbn</th>
            <th>作者</th>
            <th>出版社</th>
            <th>图片</th>
            <th>购买页</th>
        </tr>
        <tbody id="myTableBody">
        <!--把服务器返回的数据加载到该代码中-->
        <tr v-for="book in pageUtils.data">
            <td>{{book.book_id}}</td>
            <td>{{book.book_name}}</td>
            <td>{{book.isbn}}</td>
            <td>{{book.author}}</td>
            <td>{{book.publish}}</td>
            <td><img :src="book.pic_url" width="50px"></td>
            <td>{{book.type_name}}</td>
            <td><a :href="book.book_url">点击购买</a></td>
            <th>
                <input type="button" v-on:click="detelRow(book.book_id)" value="删除">
            </th>
        </tr>

        </tbody>
        <tfoot>
        <tr>
            <td colspan="6">
                <input type="button" @click="prevPage()" v-bind:disabled="pageUtils.currentPage<=1?true:false" value="上一页">
                当前第<strong id="currentPage">{{pageUtils.currentPage}}</strong>页|
                每页显示<strong id="pageSize">{{pageUtils.pageSize}}</strong>条|
                共<strong id="totalPage">{{pageUtils.totalPage}}</strong>页|
                共<strong id="totalCount">{{pageUtils.totalRecord}}</strong>条|
                <input type="button" @click="nextPage()" v-bind:disabled="pageUtils.currentPage>=pageUtils.totalPage?true:false" value="下一页">
            </td>
        </tr>
        </tfoot>


    </table>

</div>


</body>
</html>
<script src="/js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
  let vm= new Vue({
      el:"#mydiv",
      data:{
          queryWhere:{
              bookName:"",
              bookType:"",
              currentPage:1,
          },
           pageUtils:{
               currentPage:1,
               pageSize:0,
               totalPage:0,
               totalCount:0,
               data:[]
           }
      },
      methods:{
          loadData:function () {
              let _this=this;

              _this.queryWhere.currentPage=_this.pageUtils.currentPage;

             axios.get("/BookServlet2",{params:_this.queryWhere})
                 .then(function (data) {

                     // 当前第<strong id="currentPage">{{pageUtils.currentPage}}</strong>页|
                     // 每页显示<strong id="pageSize">{{pageUtils.pageSize}}</strong>条|
                     // 共<strong id="totalPage">{{pageUtils.totalPage}}</strong>页|
                     // 共<strong id="totalCount">{{pageUtils.totalRecord}}</strong>条|
                     if (data.data.code==0){
                         _this.pageUtils.currentPage=data.data.data.currentPage;
                         _this.pageUtils.pageSize=data.data.data.pageSize;
                         _this.pageUtils.totalPage=data.data.data.totalPage;
                         _this.pageUtils.totalRecord=data.data.data.totalRecord;
                         _this.pageUtils.data=data.data.data.data;

                     }else {
                         alert(data.data.msg)
                     }
                }).catch(function (error) {
                 alert("产生了错误"+error)

             })

          },
          prevPage:function () {
              if (this.pageUtils.currentPage==1){
                  return;
              }
              this.pageUtils.currentPage -=1;
              this.loadData();
          },
          nextPage:function () {
              if (this.pageUtils.currentPage<this.pageUtils.totalPage){
                  this.pageUtils.currentPage +=1;
                  this.loadData();
              }
          },
          detelRow:function () {


          }
   }

  })

</script>